<template>
    <section class="wrapper">
        <h2>目录</h2>
        <el-row :gutter="12">
            <el-col
                :span="8"
                v-for="item in routes"
                :key="item.path"
                @click.native="handleRoute(item.path)"
            >
                <el-card shadow="hover" v-if="item.meta">
                    {{ item.meta.title }}
                </el-card>
            </el-col>
        </el-row>
    </section>
</template>

<script>
import HelloWorld from '@/components/HelloWorld';
export default {
    name: 'Home',
    data() {
        return {
            routes: []
        };
    },
    components: {
        HelloWorld,
    },
    mounted() {
        this.routes = this.$router.options.routes.slice(1);
    },
    methods: {
        handleRoute(path, query) {
            this.$router.push({
                path,
                query
            });
        }
    }
};
</script>

<style scoped lang="scss">
.wrapper {
    padding: 32px;
    .el-col {
        margin-bottom: 24px;
        cursor: pointer;
        user-select: none;
    }
}
</style>